<template>

  <div>



  <a class="sb_calculator_banner" href="javascript:;"></a>
  <div class="sb_calculator">



    <div class="hd">
      <a href="JavaScript:;" v-for="(i,index) in taps" :key=index @click="tap(index)" :class="slect==index? 'on': '' ">{{i}}</a>


      <!-- <a class="on">社保缴费计算器</a> -->
    </div>
<div>

	<div class="bd">



      <div class="num">

        <label class="val" for="">请输入员工个人工资金额：</label>

        <span class="txt">

          <input type="text" v-model="sbtext" name="money" value="" onkeyup="value=value.replace(/[^\d.]/g,'')" placeholder="请输入3082~23118之间的数字"
           style="width:320px;" />
            {{sbtext}}
        </span>

        <span class="font">元</span>

        <a href="javascript:;" class="btn-submit" @click="sbsubmit()">提交</a>

      </div>


		<div class="result">

			<table>

				<tr>

					<th rowspan="2"><span class="p h">户口类别</span></th>

					<th colspan="2"><span class="t">养老保险</span></th>

					<th colspan="2"><span class="t">失业保险</span></th>

					<th colspan="2"><span class="t">工伤保险</span></th>

					<th colspan="2"><span class="t">生育保险</span></th>

					<th colspan="2"><span class="t">医疗保险</span></th>

					<th rowspan="2"><span class="p c">企业合计</span></th>

					<th rowspan="2"><span class="p c">个人合计</span></th>

					<th rowspan="2"><span class="p c">总计</span></th>

				</tr>

				<tr>

					<th><span class="t v">企业</span></th>

					<th><span class="t v">个人</span></th>

					<th><span class="t v">企业</span></th>

					<th><span class="t v">个人</span></th>

					<th><span class="t v">企业</span></th>

					<th><span class="t v">个人</span></th>

					<th><span class="t v">企业</span></th>

					<th><span class="t v">个人</span></th>

					<th><span class="t v">企业</span></th>

					<th><span class="t v">个人</span></th>

				</tr>

				<tr>

					<td><span class="t h">城镇户口</span></td>



					<td><span class="t">{{sbdatas.cqypension?sbdatas.cqypension:0}}</span></td>

					<td><span class="t">{{sbdatas.cgrpension?sbdatas.cgrpension:0}}</span></td>

					<td><span class="t">{{sbdatas?sbdatas.cqyunemployment:0}}</span></td>

					<td><span class="t">{{sbdatas?sbdatas.cgrunemployment:0}}</span></td>

					<td><span class="t">{{sbdatas?sbdatas.cqyjobinjury:0}}</span></td>

					<td><span class="t">{{sbdatas?sbdatas.cgrjobinjury:0}}</span></td>

					<td><span class="t">{{sbdatas?sbdatas.cqybirth:0}}</span></td>

					<td><span class="t">{{sbdatas?sbdatas.cgrbirth:0}}</span></td>

					<td><span class="t">{{sbdatas?sbdatas.cqymedical:0}}</span></td>

					<td><span class="t">{{sbdatas?sbdatas.cgrmedical:0}}</span></td>

					<td><span class="t">{{sbdatas?sbdatas.cqytotal:0}}</span></td>

					<td><span class="t">{{sbdatas?sbdatas.cgrtotal:0}}</span></td>

					<td><span class="t">{{sbdatas?sbdatas.calltotal:0}}</span></td>

				</tr>

				<tr>

					<td><span class="t h">农村户口</span></td>



					<td><span class="t">{{sbdatas?sbdatas.nqypension:0}}</span></td>

					<td><span class="t">{{sbdatas?sbdatas.ngrpension:0}}</span></td>

					<td><span class="t">{{sbdatas?sbdatas.nqyunemployment:0}}</span></td>

					<td><span class="t">{{sbdatas?sbdatas.ngrunemployment:0}}</span></td>

					<td><span class="t">{{sbdatas?sbdatas.nqyjobinjury:0}}</span></td>

					<td><span class="t">{{sbdatas?sbdatas.ngrjobinjury:0}}</span></td>

					<td><span class="t">{{sbdatas?sbdatas.nqybirth:0}}</span></td>

					<td><span class="t">{{sbdatas?sbdatas.ngrbirth:0}}</span></td>

					<td><span class="t">{{sbdatas?sbdatas.nqymedical:0}}</span></td>

					<td><span  class="t">{{sbdatas?sbdatas.ngrmedical:0}}</span></td>

					<td><span  class="t">{{sbdatas?sbdatas.nqytotal:0}}</span></td>

					<td><span class="t">{{sbdatas?sbdatas.ngrtotal:0}}</span></td>

					<td><span class="t">{{sbdatas?sbdatas.nalltotal:0}}</span></td>

				</tr>

				<tr>

					<td><span class="t h">备注</span></td>



					<td colspan="13">

						<p class="p">

							1、养老、失业基数下限是3082，医疗、生育、工伤最低下限基数是4624，上限都是23118，您在工资金额输入框里输入3082至23118之间的数字，<br />就可以知道各种户口类别的工作人员的缴费金额。<br />

							2、工伤缴费比例按照0.4%计算。 <br />

							3、社保保险缴费计算器的数据，每年七月一日根据政府公布的数据更新。

						</p>

					</td>

				</tr>

			</table>

		</div>

		</div>

      <div class="bd none">
        <div class="num">
          <label class="val" for="">缴费基数：</label>

          <span class="txt">

            <input type="text" name="money" v-model="gjjtext" value="" onkeyup="value=value.replace(/[^\d.]/g,'')" placeholder="请输入2774~23118之间的数字"
             style="width:320px;" />

          </span>

          <span class="font">元</span>

          <a href="javascript:;" class="btn-submit" @click="gjjsubmit()">提交</a>
        </div>

        <div class="result2">
            <div class="group">
              <label class="val" for="">企业缴费</label>
              <span class="txt">
                <input type="text" readonly="true" :value="gjjdatas.buspaynum">
              </span>
              <span class="font">元</span>
            </div>
            <div class="group">
              <label class="val" for="">个人缴费</label>
              <span class="txt">
                <input type="text" readonly="true" :value="gjjdatas.perpaynum">
              </span>
              <span class="font">元</span>
            </div>
            <div class="group flex1">
              <label class="val" for="">缴费合计</label>
              <span class="txt">
                <input type="text" readonly="true" :value="gjjdatas.totalpaynum">
              </span>
              <span class="font">元</span>
            </div>
        </div>
         <div class="tip">
            备注：请在缴费基数栏，填写您的缴费基数，单击开始计算即可算出您的住房公积金缴费金额了
          </div>
      </div>

      <div class="bd none">
        <div class="top3 af">
          <div class="num3">
            <label class="val" for="">请输入员工个人工资金额（税前）：</label>

            <span class="txt">

              <input type="text" name="money" value="" onkeyup="value=value.replace(/[^\d.]/g,'')" v-model="sdstext" placeholder="请输入税前金额"
               />

            </span>

            <span class="font">元</span>
          </div>
          <div class="group3">
            <label class="val" for="">起征点：</label>
            <span class="ch">
              <label for="gn" class="on">
                <input name="nationality" id="gn" type="radio" value="1" checked="">
                <span class="t">（国内）5000</span>
              </label>
              <label for="gw" class="">
                <input name="nationality" id="gw" type="radio" value="2">
                <span class="t">（外籍）6800</span>
              </label>
            </span>
             <a href="javascript:;" class="btn-submit" @click="sdssubmit()">开始计算</a>
          </div>
        </div>

        <ul class="bottom3">
          <li class="first">
            <span class="span1">员工个人工资金额（扣除五险一金与所得税之后工资）</span>
            <span class="span2"><i>{{sdsdatas.taxaftermoney}}</i>元</span>
          </li>
          <li>
            <span class="span1">应缴个税</span>
            <span class="span2"><i>{{sdsdatas.paypersonaltax}}</i>元</span>
          </li>
          <li class="last">
              提示：请输入员工个人工资金额（税前），并选择您的国籍。单击开始计算，就可以查到您需要缴纳多少个人所得税了。
          </li>
        </ul>


      </div>

</div>
  </div>

    <my-heart></my-heart>
     <my-ft></my-ft>
      <div class="bdtjtc2" style="background: rgba(0,0,0,.7);color: white">
        <span style="color: white">×</span>
        {{tcmsg}}
      </div>
   </div>

</template>

<script>
  import axios from 'axios';
  import $ from 'jquery';
  export default {
    name: 'HelloWorld',
    data () {
      return {
        taps:['社保缴费计算器','公积金计算器','所得税计算器'],
        slect:'',
        sbtext:'',
        sbdatas:'',
        gjjtext:'',
        gjjdatas:'',
        sdstext:'',
        sdsdatas:'',
        tcmsg:''
      }
    },
    async asyncData ({ params }) {
    let nh = await axios.get(`https://exam.zhonghaiqihang.com/PInterface/Header/headerData`);
    let data  = {nav:nh.data};
    return { title: data}
  },
  mounted:function(){

    var _this = this
  },
  head() {
    return {
      title: '资质代办费用_资质办理价格_资质计算器_企业邦',
      meta: [
        { hid: 'description', name: 'description', content: '建筑资质代办费用,资质办理价格,资质代办多少钱,代办资质如何收费,企业资质查询'},
        { hid: 'keywords', name: 'keywords', content:'企业邦-24小时免费服务400-855-1888,企业经营资质服务平台,提供建筑资质代办费用,资质办理价格,资质代办多少钱,代办资质如何收费,企业资质查询等专业的全方位企业服务。' },

      ]
    }
  },
  methods:{
      sbsubmit:function(){
        var _this = this

        if(_this.sbtext == "" || _this.sbtext == ("^[A-Za-z]+$")){
          _this.tcmsg = '请输入员工个人工资金额'
          $('.bdtjtc2').addClass('select');
          $('.bdtjtc2').fadeIn(0);
          $('.bdtjtc2').fadeOut(2500);
        }else{

          _this.$axios.post('https://www.hrto.com.cn/Home/FiveInsurance/fiveInsuranceCalculation','money='+_this.sbtext
          ).then(function(res){
              if(res.data == '请输入大于3082的金额'){
                _this.tcmsg = '请输入大于3082的金额'
                $('.bdtjtc2').addClass('select');
                $('.bdtjtc2').fadeIn(0);
                $('.bdtjtc2').fadeOut(2500);
              }else{
                  _this.sbdatas = res.data
              }



          })

        }

      },

      gjjsubmit:function(){
        var _this = this
        if(_this.gjjtext== "" || _this.gjjtext == ("^[A-Za-z]+$")){
          _this.tcmsg = '请输入员工个人工资金额'
          $('.bdtjtc2').addClass('select');
          $('.bdtjtc2').fadeIn(0);
          $('.bdtjtc2').fadeOut(2500);
        }else{

          _this.$axios.post('https://www.hrto.com.cn/Home/PublicFund/publicFundCalculation','money='+_this.gjjtext
          ).then(function(res){
              if(res.data == '请输入大于2774的金额'){
                _this.tcmsg = '请输入大于2774的金额'
                $('.bdtjtc2').addClass('select');
                $('.bdtjtc2').fadeIn(0);
                $('.bdtjtc2').fadeOut(2500);
              }else{
                  _this.gjjdatas = res.data

              }



          })

        }
      },

      sdssubmit:function(){
        var _this = this

          if($('#gn').prop("checked") == true){

               if(_this.sdstext== "" || _this.sdstext == ("^[A-Za-z]+$")){
                 _this.tcmsg = '请输入员工个人工资金额'
                 $('.bdtjtc2').addClass('select');
                 $('.bdtjtc2').fadeIn(0);
                 $('.bdtjtc2').fadeOut(2500);
               }else{
                    _this.$axios.post('https://www.hrto.com.cn/Home/PersonalIncomeTax/PersonalIncomeTaxCalculation','money='+_this.sdstext+'&nationality=1'
                    ).then(function(res){
                        if(res.data == '请输入大于5000的金额'){
                          _this.tcmsg = '请输入大于5000的金额'
                          $('.bdtjtc2').addClass('select');
                          $('.bdtjtc2').fadeIn(0);
                          $('.bdtjtc2').fadeOut(2500);
                        }else{
                            _this.sdsdatas = res.data

                        }



                    })
               }
          }else{
            if(_this.sdstext== "" || _this.sdstext == ("^[A-Za-z]+$")){
              _this.tcmsg = '请输入员工个人工资金额'
              $('.bdtjtc2').addClass('select');
              $('.bdtjtc2').fadeIn(0);
              $('.bdtjtc2').fadeOut(2500);
            }else{
                 _this.$axios.post('https://www.hrto.com.cn/Home/PersonalIncomeTax/PersonalIncomeTaxCalculation','money='+_this.sdstext+'&nationality=2'
                 ).then(function(res){
                     if(res.data == '请输入大于6800的金额'){
                       _this.tcmsg = '请输入大于6800的金额'
                       $('.bdtjtc2').addClass('select');
                       $('.bdtjtc2').fadeIn(0);
                       $('.bdtjtc2').fadeOut(2500);
                     }else{
                         _this.sdsdatas = res.data
                     }



                 })
            }
          }




      },




      tap:function(e1){
        var _this = this
        _this.slect = e1

        $('.bd').eq(_this.slect).show().siblings().hide()

      }
  }
  }
</script>


<style>
  .rssb7.zssc7.sc{
        margin-top: 0px;
  }
  .bottom3{
    width: 1096px;
    margin: 0 auto;
      border-left: 1px solid #EEEEEE;
      border-right: 1px solid #EEEEEE;
      border-top: 1px solid #EEEEEE;
  }
  .bottom3 li{
    height: 54px;
    display: flex;
    border-bottom: 1px solid #EEEEEE;
  }
  .bottom3 li span{
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #22262A;
  }
  .bottom3 li .span1{
    width: 369px;
    height: 53px;
    border-right: 1px solid #EEEEEE;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .bottom3 li .span2{
    flex: 1;
    display: flex;
    height: 53px;
    align-items: center;
    justify-content: flex-end;
    margin-right: 30px;
  }
  .bottom3 li span i{
    font-style: normal;
    margin-right: 10px;
  }
  .bottom3 .last{
      height: 77px;
      justify-content: center;
      line-height: 77px;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #FFA800;
  }
  .bottom3 .first{
    background: rgba(14, 118, 247, 0.04);
  }
    .top3{
      width: 1096px;
      margin: 0px auto 30px;
      display: flex;
      align-items: center;
      padding-top: 60px;
    }
    .num3{
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #212529;
      float: left;
    }
    .top3 .num3.val{

    }
    .group3{
      margin-left: 35px;
      float: left;
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #212529;
      display: flex;
      align-items: center;
    }
    .group3 .ch{
      display: flex;
    }
    .group3 .ch label{
      display: flex;
      align-items: center;
    }
    .group3 .btn-submit{
      margin: 0 0 0 30px;
    }
    .top3 .num3 .txt{
      width: 305px;
      height: 35px;
      background: #FFFFFF;
      border: 1px solid #D6D6D6;
      border-radius: 2px;
      display: inline-block;
    }
     .top3 .num3 .txt input{
       width: 92%;
       border: none;
       outline: none;
       height: 95%;
       font-size: 14px;
       font-family: Microsoft YaHei;
       font-weight: 400;
       color: #212529;
       padding-left: 16px;
     }
    .top3 .num3 .font{
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #212529;
padding-left: 13px;
    }
  .none{
    display: none;
  }
  .sb_calculator{
    padding-top: 40px;
    background: url(../assets/img/sb_calculatorbj.png) no-repeat;
    padding-bottom: 24px;
  }
			.bd{
				width: 1200px;
        height: 580px;
				margin: 0 auto;
        background: #FFFFFF;
        box-shadow: 1px 6px 27px 0px rgba(111, 111, 111, 0.15);
			}
      .result table .h{
        width: 115px;
      }
			.result{
      width: 1090px;
      padding-bottom: 60px;

				margin: 0 auto;
		}
		.result table{
			    border-collapse: collapse;
			    border: 1px solid #eee;
			    width: 100%;
		}
		.result table th .t{
			    display: inline-block;
			    line-height: 60px;
		}
		.result table th{
			    border: 1px solid #eee;
			    padding: 0;
			    font-size: 16px;
			    color: #212529;
			    background: #f6faff;
			    font-weight: normal;
		}
   .result table th .p{
          display: inline-block;
    }
		.result table td{
			    text-align: center;
			    border: 1px solid #eee;
		}
	    .result table td .t{
			    text-align: center;
			    font-size: 16px;
			    color: #212529;
			    display: inline-block;
		}
		.result table td .p{
			 text-align: left;
			 margin: 30px 0px;
			 padding-left: 30px;
			 font-size: 14px;
			 color: #999999;
        white-space: initial;
		}

		.hd{
			    margin: 0px auto 20px;
			    background: #fff;
			    height: 50px;
			   background: #FFFFFF;
			   box-shadow: 1px 6px 27px 0px rgba(111, 111, 111, 0.15);
			    overflow: visible;
				width: 1200px;
		}
		.hd a{
			display: block;
			float: left;
			width: 182px;
			line-height: 50px;
			height: 57px;
			text-align: center;
			font-size: 16px;
			color: #000;
		}

		.hd a.on, .hd a:hover{
			background: url(../assets/img/tool-slide.png) no-repeat;
			color: #fff;
		}
    .num{
          margin: 0 auto 30px;
          overflow: hidden;
          font-size: 0;
          padding-top: 60px;
    }
    .num label.val{
          float: left;
          width: 450px;
          line-height: 40px;
          font-size: 16px;
          color: #666;
          text-align: right;
    }
    .num .txt{
          border: 1px solid #eee;
          display: inline-block;
          padding: 0 10px;
          background: #fafaff;
    }
    .num .txt input{
          line-height: 38px;
          display: inline-block;
          border: none;
          padding: 0;
          font-size: 14px;
          color: #333;
          background: none;
          width: 320px;
    }
    .num .font{
          display: inline-block;
          line-height: 40px;
          font-size: 16px;
          color: #666;
          padding: 0 0 0 10px;
    }
    .btn-submit{
          margin: 0 0 0 20px;
          display: inline-block;
          width: 120px;
          line-height: 40px;
          text-align: center;
          color: #fff;
          font-size: 16px;
          background: #0862ff;
    }
    .result2{
      width: 1096px;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid #EEEEEE;
      margin: 0 auto;
      display: flex;
      flex-wrap: wrap;
      overflow: hidden;
    }
    .result2 .group{
      width: 50%;
      display: flex;
      height: 54px;
      align-items: center;
      font-size: 14px;
      color: rgba(34, 38, 42, 1);
      border-right: 1px solid rgba(238, 238, 238, 1);
      margin-left: -1px;
      background: rgba(14, 118, 247, 0.04);
    }
    .result2 .flex1{
      width: 50%;
      background: white;
      border-right: 1px solid transparent;
    }

    .result2 .val{
      width: 116px;
      height: 54px;
      text-align: center;
      line-height: 54px;
      border-right: 1px solid rgba(238, 238, 238, 1);
    }
     .result2 .flex1 .txt input{
       background: white;

     }
    .result2 .txt{
      flex: 1;
    }
    .result2 .txt input{
      width: 100%;
      border: none;
      outline: none;
      font-size: 14px;
      text-align: right;
       background: none;
    }
    .result2 .font{
      padding-left: 10px;
      padding-right: 30px;
    }
    .tip{
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #FFA800;
      border-left: 1px solid #EEEEEE;
      border-right: 1px solid #EEEEEE;
      border-bottom: 1px solid #EEEEEE;
      width: 1096px;
      height: 77px;
      line-height: 77px;
      text-align: center;
      margin: 0 auto;
    }
</style>
